<template>
	<div class="row">
		<div class="rowItem">
			<div class="panel">
				<titleCom name="开标区监控"></titleCom>
				<div class="panelBody">
					<div class="video">
						<div class="videoItem" v-for="item in kbRooms" :key="item.id">
							<div class="videoInner">
								<div class="videoBox">
									<div class="top">
										<div class="title">{{item.name}}</div>
										<div class="btn">
                      <router-link to="/DP1" custom >
                        <img src="./assets/full.png" alt="" />
                      </router-link>
										</div>
									</div>
                    <div class="easy-player">
                      <EPlayer :url="item.url" @pullFlow="pullFlow"/>
                    </div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="rowItem">
			<div class="panel">
				<titleCom name="评标区监控"></titleCom>
				<div class="panelBody">
					<div class="video">
            <div class="videoItem" v-for="item in pbRooms" :key="item.id">
							<div class="videoInner">
								<div class="videoBox">
									<div class="top">
										<div class="title">{{item.name}}</div>
										<div class="btn">
                      <router-link to="/DP1" custom >
                        <img src="./assets/full.png" alt="" />
                      </router-link>
										</div>
									</div>
<!--                  <H265Player :url="item.url" style="width: 100%;height:100%" />-->
                  <div class="easy-player">
                    <EPlayer :url="item.url" @pullFlow="pullFlow"/>
                  </div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
  import EPlayer from '../EPlayer.vue';
  // import H265Player from 'vue-h265-player';
	import titleCom from './titleCom.vue'
  import {playUrl, roomInfo} from "@/api/weeon/ksh";
	export default {
		name: "item",
		components: {
      EPlayer,
			titleCom
		},
		data() {
			return {
        // testUrl: 'https://v-ngb.qf.56.com/live/520119_1731973865633.flv',
        playList: [],
        kbRooms: [{
            id: '1d3ddbc4f58144978ebab6395591761c',
            name: '10F开标室1半球1监控',
            url: ''
          },{
            id: 'a57cf40e62b44137988a02f8a16f6559',
            name: '10F开标室2半球2监控',
            url: ''
          },{
            id: 'd429c5d0149d41cc97ac6b6ad5af9ec4',
            name: '10F开标室10半球2监控',
            url: ''
          },{
            id: '561663fb1d2b422ba6a51683b2238e4f',
            name: '10F开标室6半球2监控',
            url: ''
          }
        ],
        pbRooms: [{
            id: '519ddd0bc4ec45bf991d03d12a10813d',
            name: '12F评标室12半球1监控',
            url: ''
          },{
            id: 'f2ceb80ed8db4fcba7cd3c1f23e2a52a',
            name: '12F评标室13半球2监控',
            url: ''
          },{
            id: '849a092a0bdc4bc99125bab51adf1ae3',
            name: '12F评标室15半球2监控',
            url: ''
          },{
            id: 'ac903f23c88a425aa052c88db5b2b609',
            name: '12F评标室16半球2监控',
            url: ''
          }
        ]
			}
		},
    created() {
      //TODO 查询开评标室信息
    },
    mounted() {
      // this.getRoomInfo();
      // await this.getPlayUrl({});
      this.roomInit(this.kbRooms);
      this.roomInit(this.pbRooms);
    },
		methods: {
      pullFlow() {
        // .....
      },
      async getRoomInfo(){
        const res = await roomInfo({});
        if (res.stat == 1) {
          this.kbRooms = res.data.kbrooms
          this.pbRooms = res.data.pbrooms
        }
      },
      async getPlayUrl(device){
        let p = {deviceId: device.id}
        // let p = {deviceId: '4495a639944548039e9f650a4de342cd'}
        // if (!this.testUrl) {
          const res = await playUrl(p);
          if (res.success) {
            // this.testUrl = res.data.url
            device.url = res.data.url
          }
        // }else{
        //   device.url = this.testUrl
        // }
      },
      async roomInit(arr) {
        arr.forEach((item,index) =>{
          this.getPlayUrl(item);
        })
      },
		},
    computed: {

    },
    watch: {

    },
	}
</script>

<style lang="scss" scoped>
  .container {
    width: 100%;
    height: 100%;
    padding: 100px 0 0 100px;
    box-sizing: border-box;
  }
  .easy-player {
    width: 100%;
    height: 100%;
  }
	.row {
		height: 100%;
		display: flex;
		justify-content: space-between;

		.rowItem {
			height: 100%;
			width: calc(50% - 13px);

			.panel {
				height: 100%;
				box-sizing: border-box;
				position: relative;
				display: flex;
				flex-direction: column;

				.panelBody {
					flex: 1;
					min-height: 0;
					width: 100%;

					.video {
						height: 100%;
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						.videoItem {
							width: calc(50% - 0.03125rem);
							height: calc(50% - 12px);
							margin-top: 12px;
							background-image: url('assets/box.png');
							background-repeat: no-repeat;
							background-size: 100% 100%;
							display: flex;
							align-items: center;
							justify-content: center;

							.videoInner {
								width: calc(100% - 14px);
								height: calc(100% - 14px);
							}

							.videoBox {
								height: 100%;
								position: relative;

								.top {
									position: absolute;
									left: 0;
									top: 0;
									right: 0;
									background-color: rgba(0, 65, 124, 0.89);
									display: flex;
									align-items: center;
									justify-content: space-between;
									height: 24px;
									padding-right: 2px;
                  z-index: 99;
									.title {
										color: #E9FBFF;
										font-size: 12px;
										padding: 0 4px;
									}

									.btn {
										cursor: pointer;
										font-size: 0;
										width: 24px;
										height: 24px;
										display: flex;
										align-items: center;
										justify-content: center;

										img {
											width: 13px;
											height: 12px;
										}
									}
								}

								img {
									width: 100%;
									height: 100%;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
